<template>
  <page-view :title="title">
    <a-card :bordered="false">
      <detail-list title="$t('basicIndex.tksq')">
        <detail-list-item term="{{ $t('basicIndex.qhdh') }}">1000000000</detail-list-item>
        <detail-list-item term="{{ $t('basicIndex.zs') }}">{{ $t('basicIndex.yqh') }}</detail-list-item>
        <detail-list-item term="{{ $t('basicIndex.xsdh') }}">1234123421</detail-list-item>
        <detail-list-item term="{{ $t('basicIndex.zdd') }}">3214321432</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px"/>
      <detail-list title="$t('basicIndex.yhxx')">
        <detail-list-item term="{{ $t('basicIndex.yhxm') }}">{{ $t('basicIndex.fxx') }}</detail-list-item>
        <detail-list-item term="{{ $t('basicIndex.lxdh') }}">18100000000</detail-list-item>
        <detail-list-item term="{{ $t('basicIndex.cykd') }}">{{ $t('basicIndex.cncc') }}</detail-list-item>
        <detail-list-item term="{{ $t('basicIndex.qhdz') }}">{{ $t('basicIndex.zjshzsxhqwsl') }}18{{ $t('basicIndex.h') }}</detail-list-item>
        <detail-list-item term="{{ $t('basicIndex.bz') }}">	{{ $t('basicIndex.w') }}</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px"/>

      <div class="title">{{ $t('basicIndex.thsp') }}</div>
      <s-table
        style="margin-bottom: 24px"
        row-key="id"
        :columns="goodsColumns"
        :data="loadGoodsData">

      </s-table>

      <div class="title">{{ $t('basicIndex.thjd') }}</div>
      <s-table
        style="margin-bottom: 24px"
        row-key="key"
        :columns="scheduleColumns"
        :data="loadScheduleData">

        <template
          slot="status"
          slot-scope="status">
          <a-badge :status="status" :text="status | statusFilter"/>
        </template>

      </s-table>
    </a-card>
  </page-view>
</template>

<script>
import { PageView } from '@/layouts'
import { STable } from '@/components'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item

export default {
  components: {
    PageView,
    DetailList,
    DetailListItem,
    STable
  },
  data () {
    return {
      goodsColumns: [
        {
          title: this.$t('basicIndex.spbh'),
          dataIndex: 'id',
          key: 'id'
        },
        {
          title: this.$t('basicIndex.spmc'),
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: this.$t('basicIndex.sptm'),
          dataIndex: 'barcode',
          key: 'barcode'
        },
        {
          title: this.$t('basicIndex.dj'),
          dataIndex: 'price',
          key: 'price',
          align: 'right'
        },
        {
          title: '数量（件）',
          dataIndex: 'num',
          key: 'num',
          align: 'right'
        },
        {
          title: this.$t('basicIndex.je'),
          dataIndex: 'amount',
          key: 'amount',
          align: 'right'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadGoodsData: () => {
        return new Promise(resolve => {
          resolve({
            data: [
              {
                id: '1234561',
                name: '矿泉水 550ml',
                barcode: '12421432143214321',
                price: '2.00',
                num: '1',
                amount: '2.00'
              },
              {
                id: '1234562',
                name: '凉茶 300ml',
                barcode: '12421432143214322',
                price: '3.00',
                num: '2',
                amount: '6.00'
              },
              {
                id: '1234563',
                name: this.$t('basicIndex.hcdsp'),
                barcode: '12421432143214323',
                price: '7.00',
                num: '4',
                amount: '28.00'
              },
              {
                id: '1234564',
                name: this.$t('basicIndex.tbhcddj'),
                barcode: '12421432143214324',
                price: '8.50',
                num: '3',
                amount: '25.50'
              }
            ],
            pageSize: 10,
            pageNo: 1,
            totalPage: 1,
            totalCount: 10
          })
        }).then(res => {
          return res
        })
      },

      scheduleColumns: [
        {
          title: this.$t('basicIndex.sj'),
          dataIndex: 'time',
          key: 'time'
        },
        {
          title: this.$t('basicIndex.dqjd'),
          dataIndex: 'rate',
          key: 'rate'
        },
        {
          title: this.$t('basicIndex.zs'),
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作员ID',
          dataIndex: 'operator',
          key: 'operator'
        },
        {
          title: this.$t('basicIndex.hs'),
          dataIndex: 'cost',
          key: 'cost'
        }
      ],
      loadScheduleData: () => {
        return new Promise(resolve => {
          resolve({
            data: [
              {
                key: '1',
                time: '2017-10-01 14:10',
                rate: this.$t('basicIndex.lxkh'),
                status: 'processing',
                operator: '取货员 ID1234',
                cost: '5mins'
              },
              {
                key: '2',
                time: '2017-10-01 14:05',
                rate: this.$t('basicIndex.qhycf'),
                status: 'success',
                operator: '取货员 ID1234',
                cost: '1h'
              },
              {
                key: '3',
                time: '2017-10-01 13:05',
                rate: this.$t('basicIndex.qhyjd'),
                status: 'success',
                operator: '取货员 ID1234',
                cost: '5mins'
              },
              {
                key: '4',
                time: '2017-10-01 13:00',
                rate: this.$t('basicIndex.sqsptg'),
                status: 'success',
                operator: this.$t('basicIndex.xt'),
                cost: '1h'
              },
              {
                key: '5',
                time: '2017-10-01 12:00',
                rate: this.$t('basicIndex.fqthsq'),
                status: 'success',
                operator: this.$t('basicIndex.yh'),
                cost: '5mins'
              }
            ],
            pageSize: 10,
            pageNo: 1,
            totalPage: 1,
            totalCount: 10
          })
        }).then(res => {
          return res
        })
      }
    }
  },
  filters: {
    statusFilter (status) {
      const statusMap = {
        'processing': this.$t('basicIndex.jxz'),
        'success': this.$t('basicIndex.wc'),
        'failed': this.$t('basicIndex.sb')
      }
      return statusMap[status]
    }
  },
  computed: {
    title () {
      return this.$route.meta.title
    }
  }

}
</script>

<style lang="less" scoped>
  .title {
    color: rgba(0,0,0,.85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }
</style>
